<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="7">
            <el-form-item label="身份标识" label-width="110px">
              <el-input v-model.trim="userCenterId" style="70%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="平台名称" label-width="180px">
              <el-select v-model="platformId" style="70%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of platform" :key="item.value" :value="item.platformId" :label="item.platformName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              v-powerbtn="{power: 'usercenter-search-search'}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="7">
            <el-form-item label="平台账号" label-width="110px">
              <el-input v-model.trim="userId" style="70%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否匹配其他平台账号" label-width="180px">
              <el-select v-model="bindingStatus" style="70%" size="mini" placeholder="请选择">
                <el-option v-for="item of account" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
              <!-- v-powerbtn="{power: 'usercenter-yidong-search'}" -->
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="身份标识">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.userCenterId" :content="scope.row.userCenterId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.userCenterId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="平台名称">
          <template slot-scope="scope">
            <div v-if="users" class="liantongpro">
              <el-popover
                v-for="(item, index) in users[scope.$index]"
                :key="index"
                :content="allUserName[scope.$index][index]"
                :class="users[scope.$index].length !== index + 1 ? 'liness' : ''"
                class="popverss"
                placement="top"
                trigger="hover"
              >
                <span slot="reference" style="cursor:pointer" type="info">{{ allUserName[scope.$index][index] }}</span>
              </el-popover>
            </div>
            <!-- <el-tag v-for="item in users[scope.$index]" :key="item" type="info">{{ item }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="平台账号">
          <template slot-scope="scope">
            <div v-if="userIdss" class="liantongpro">
              <el-popover
                v-for="(item, index) in userIdss[scope.$index]"
                :key="index"
                :content="allUserIdss[scope.$index][index]"
                :class="users[scope.$index].length !== index + 1 ? 'liness' : ''"
                class="popverss"
                placement="top"
                trigger="hover"
              >
                <span slot="reference" style="cursor:pointer" type="info">{{ allUserIdss[scope.$index][index] }}</span>
              </el-popover>
            </div>
            <!-- <el-tag v-for="item in scope.row.users" :key="item.number" type="info">{{ item.userId }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="是否匹配其他平台账号" width="170">
          <template slot-scope="scope">
            {{ scope.row.bindingStatus === '0' ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              v-powerbtn="{power: 'usercenter-search-detail'}"
              type="primary"
              round
              plain
              size="mini"
              @click="watch(scope.row)"
            >查看详细</el-button>
              <!-- icon="el-icon-third-tongyong" -->
            <!-- <el-button
              v-show="total_general
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-rizhi"
            >用户通用信息</el-button> -->
              <!-- v-powerbtn="{power: 'usercenter-search-point'}" -->
            <el-button
              v-powerbtn="{power: 'usercenter-search-point'}"
              type="primary"
              plain
              size="mini"
              round
              @click="watchPoint(scope.row)"
            >积分</el-button>
              <!-- icon="el-icon-third-jifen" -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <connect-plat v-if="status" :point-dialogplat="pointDialogplat" :search-request="searchRequest" :scope="scope" @closePoint="closePoint" />
    <watch-info :dialog-table-visible="dialogTableVisible" :id="id" :plat="plat" @closeDialog="closeDialog" />
    <user-point :point-dialog="pointDialog" :info="info" :platform-term="platformTerm" @closePointss="closePointss" />
  </div>
</template>
<script>
import secret from '@/utils/secret'
import {
  getList,
  getSelect
} from '@/api/search'
import {
  mapGetters
} from 'vuex'
import connectPlat from './components/connectPlat.vue'
import WatchInfo from '@/views/liantong/components/watch.vue'
import UserPoint from './components/point.vue'
import powerbtn from '@/directive/powerbtn/index.js'
export default {
  name: 'Search',
  directives: {
    powerbtn
  },
  components: {
    connectPlat: connectPlat, // 关联平台
    WatchInfo: WatchInfo, // 查看详细信息
    UserPoint: UserPoint // 用户积分
  },
  data() {
    return {
      platform: null, // 平台标识list
      platformId: '', // 平台标识
      account: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      searchRequest: Object, // 请求数据
      status: false, // 状态
      bindingStatus: '',
      list: null, // 列表
      pageid: 1, // 当前页数
      pagecount: 20, // 每页显示条数
      count: 0, // 总数量
      pages: null, // 总页数
      userCenterId: '', // 唯一身份标识
      userId: '', // 平台账号
      pointDialogplat: false, // 关联平台遮罩
      scope: null, // 传值
      dialogTableVisible: false, // 查看详细遮罩
      plat: '', // 平台id
      id: null, // userCenterId
      pointDialog: false, // 积分遮罩
      info: null, // 信息
      power: [], // 按钮权限
      total_search: false, // 查询重置按钮
      total_find: false, // 查看详细
      total_general: false, // 用户通用信息
      total_integral: false, // 用户积分
      platformTerm: null,
      param: null, // 搜索条件
      flag: true // 改变当前显示页数
    }
  },
  computed: {
    ...mapGetters(['assignment', 'token']),
    // 唯一身份标识截取
    // userInfoId() {
    //   if (!!this.list) { // eslint-disable-line
    //     var userCenterId = this.list
    //     var newId = []
    //     userCenterId.forEach(function(item) {
    //       var id
    //       id = item.userCenterId.slice(0, 18) + '...'
    //       newId.push(id)
    //     })
    //     return newId
    //   } else {
    //     return []
    //   }
    // },
    // 平台名称
    users() {
      if (!!this.list) { // eslint-disable-line
        var userName = this.list
        var newUserName = []
        userName.forEach(function(item) {
          if (!!item) { // eslint-disable-line
            var sonName = []
            var name
            item.users.forEach(function(value) {
              if (!!value) { // eslint-disable-line
                console.log(value.platformName)
                if (!!value.platformName) { // eslint-disable-line
                  name = value.platformName.slice(0, 6) + '...'
                }
                sonName.push(name)
              }
            })
            newUserName.push(sonName)
          }
        })
        return newUserName
      } else {
        return []
      }
    },
    // 平台全名称
    allUserName() {
      if (!!this.list) { // eslint-disable-line
        var userName = this.list
        var newUserName = []
        userName.forEach(function(item) {
          if (!!item){ // eslint-disable-line
            var sonName = []
            item.users.forEach(function(value) {
              if (!!value) { // eslint-disable-line
                sonName.push(value.platformName)
              }
            })
            newUserName.push(sonName)
          }
        })
        return newUserName
      } else {
        return []
      }
    },
    // 全平台账号
    allUserIdss() {
      if (!!this.list) { // eslint-disable-line
        var userName = this.list
        var newUserName = []
        userName.forEach(function(item) {
          if (!!item) { // eslint-disable-line
            var sonName = []
            item.users.forEach(function(value) {
              if (!!value) { // eslint-disable-line
                sonName.push(value.userId)
              }
            })
            newUserName.push(sonName)
          }
        })
        return newUserName
      } else {
        return []
      }
    },
    // 平台账号
    userIdss() {
      if (!!this.list) { // eslint-disable-line
        var userName = this.list
        var newUserName = []
        userName.forEach(function(item) {
          if (!!item) { // eslint-disable-line
            var sonName = []
            var name
            item.users.forEach(function(value) {
              // console.log(value.platformName)
              if (!!value.userId) { // eslint-disable-line
                name = value.userId.slice(0, 6) + '...'
              }
              sonName.push(name)
            })
            newUserName.push(sonName)
          }
        })
        return newUserName
      } else {
        return []
      }
    }
  },
  mounted() {
    this.getSelectList()
    this.search()
    // 权限按钮
    // var that = this
    // console.log(this.assignment)
    /* this.assignment.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.menuCode === 'querycollect') {
          that.power = item.btnList
        }
      }
    })
    this.power.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.code === 'total_search') {
          that.total_search = true
        }
        if (item.code === 'total_find') {
          that.total_find = true
        }
        if (item.code === 'total_general') {
          that.total_general = true
        }
        if (item.code === 'total_integral') {
          that.total_integral = true
        }
      }
    }) */
  },
  methods: {
    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const data = {
        // token: this.token,
        platformId: this.param.platformId, // 平台标识
        userCenterId: this.param.userCenterId, // 唯一身份标识
        userId: this.param.userId, // 平台账号
        bindingStatus: this.param.bindingStatus, // 状态
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求数据')
      console.log(data)
      // if (this.flag === true) {
      getList(secret.Encrypt(data)).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      const data = {
        // token: this.token,
        platformId: this.param.platformId, // 平台标识
        userCenterId: this.param.userCenterId, // 唯一身份标识
        userId: this.param.userId, // 平台账号
        bindingStatus: this.param.bindingStatus, // 状态
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求数据')
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        this.pagecount = num
        this.pageid = 1
        this.flag = true
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 请求下拉
    getSelectList() {
      const params = {
        // token: this.token
      }
      getSelect(secret.Encrypt(params)).then(response => {
        var data = response.data
        this.platformTerm = data.list
        this.platform = data.list
      })
    },
    // 搜索
    search() {
      const param = {
        // token: this.token, // token
        platformId: this.platformId, // 平台标识
        userCenterId: this.userCenterId, // 唯一身份标识
        userId: this.userId, // 平台账号
        bindingStatus: this.bindingStatus, // 状态
        pageid: 1,
        pagecount: this.pagecount
      }
      this.param = param
      console.log('请求参数')
      console.log(param)
      getList(secret.Encrypt(param)).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        this.pages = response.data.pages // 总页数
        this.pageid = parseInt(response.data.pageid) // 当前页数
        // this.pagecount = parseInt(response.data.pagecount) // 当前显示条数
        console.log('返回数据')
        console.log(response.data)
        this.searchRequest = param
        this.status = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 重置
    reset() {
      this.platformMark = ''
      this.userCenterId = ''
      this.userId = ''
      this.bindingStatus = ''
      this.platformId = ''
    },
    // 查看详情
    watch(scope) {
      const bindingStatus = scope.bindingStatus
      if (bindingStatus === '1') {
        this.pointDialogplat = true
        this.scope = scope
      } else {
        this.dialogTableVisible = true
        // console.log(scope.users[0].userId)
        this.id = scope.users[0].userId
        this.plat = scope.users[0].platformId
      }
    },
    // 积分组件
    watchPoint(scope) {
      this.pointDialog = true
      this.info = scope
    },
    // 子父组件传值(关联)
    closePoint(e) {
      console.log(e)
      this.pointDialogplat = false
      this.pointDialog = false
      if (e) {
        this.callBack(e)
      }
    },
    closePointss(e) {
      this.pointDialogplat = false
      this.pointDialog = false
    },
    closeDialog() {
      this.dialogTableVisible = false
    },
    callBack(param) {
      getList(secret.Encrypt(param)).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        this.pages = response.data.pages // 总页数
        this.pageid = parseInt(response.data.pageid) // 当前页数
        console.log('返回数据')
        console.log(response.data)
        this.searchRequest = param
        this.status = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
  .liantongpro {
    width: 100%;
    padding: 0 !important;
    /* margin: 0 auto !important; */
    /* display: flex; */
    justify-content: start;
    flex-wrap: wrap;
    /* float: left; */
  }

  .popverss {
    display: block;
    /* width: 80px; */
    width: 100%;
    margin: 5px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .popverss-top {
    padding-top: 5px;
  }

  .absolute {
    right: 30px;
    top: 3px;
  }

  .el-table .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    padding: 0;
  }

  .liness {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 12px;
  }
  .app-head{
    padding: 6px 10px 0px 10px;
    border-radius: 10px;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
  // table
/* .el-table td, .el-table th{
  padding: 4px 0 3px 0 !important;
} */
</style>
